<template>
  <!-- 催收执行页-通讯录模块-案件批注 -->
  <section class="component case-remark">
    <!-- 数据区域 -->
    <data-box :data="dataSet" :page="pageService" class="data-box-has-button">
      <template slot="buttons" v-if="!hiddenRemark && menuChannel !== 44 && menuChannel !== 34">
        <el-button @click="dialog.addCaseRemark = true">新增批注</el-button>
      </template>
      <template slot="columns">
        <el-table-column
          :formatter="row => $filter.dateFormat(row.createTime)"
          :min-width="$helper.getColumnWidth(5)"
          label="时间"
          prop="createTime"
        ></el-table-column>
        <el-table-column
          :min-width="$helper.getColumnWidth(4)"
          label="批注人"
          prop="operatorRealName"
        ></el-table-column>
        <el-table-column
          :min-width="$helper.getColumnWidth(10)"
          label="批注内容"
          prop="content"
        >
          <template slot-scope="scope">
            <el-button v-if="scope.row.sortNum === 2" type="warning"
              >置顶</el-button
            >
            <span style="margin-left:5px;">{{ scope.row.content }}</span>
          </template>
        </el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(10)" label="操作">
          <template slot-scope="scope">
            <el-button @click="onClickTop(scope.row, 1)" type="text" v-if="scope.row.sortNum === 2">取消置顶</el-button>
            <el-button @click="onClickTop(scope.row, 2)" type="text"  v-if="scope.row.sortNum === 1">置顶</el-button>
          </template>
        </el-table-column>
      </template>
    </data-box>
    <el-dialog
      :append-to-body="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="dialog.addCaseRemark"
      title="添加批注"
    >
      <add-case-remark
        @close="
          dialog.addCaseRemark = false;
          refreshData();
        "
        ref="add-case-remark"
      ></add-case-remark>
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { namespace } from "vuex-class";
import { Prop } from "vue-property-decorator";
import { Dependencies } from "~/core/decorator";
import { PageService } from "~/utils/page.service";
import { SortService } from "~/utils/sort.service";
import { CaseOperatorPageService } from "~/services/domain-service/case-operator-page.service";
import AddCaseRemark from "~/components/collection-execution/operate-components/add-case-remark.vue";
const CollectionExecutionModule = namespace("collection-execution");

@Component({
  components: {
    AddCaseRemark
  }
})
export default class CaseRemark extends Vue {
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(SortService)
  private sortService: SortService;
  @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService;

  @CollectionExecutionModule.State private caseId: string;
  @CollectionExecutionModule.State private hiddenAction;
  @CollectionExecutionModule.State private hiddenRemark;
  @CollectionExecutionModule.State private menuChannel;

  private searchModel: any = {};
  private dataSet: any[] = [];
  private dialog: any = {
    addCaseRemark: false
  };

  private refreshData() {
    this.searchModel.caseId = this.caseId;
    this.caseOperatorPageService
      .caseRemark(this.searchModel, this.pageService, this.sortService)
      .subscribe(data => {
        this.dataSet = data;
      });
  }

  private activated() {
    this.refreshData();
  }

  private onClickTop(row, types) {
    this.caseOperatorPageService
      .updateCaseRemarkTop({
        caseId: this.caseId,
        remarkId: row.id,
        type: types
      })
      .subscribe(data => {
        this.refreshData();
      });
  }
}
</script>

<style lang="less" scoped></style>
